<template>
  <view class="box">
    <!-- 收藏 -->
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        class="image1"
        @click="fanhui"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />我的收藏
      <!-- <image class="image2" src="https://pic.bangbangtongcheng.com/static/xiaoxi.png" mode="widthFix" /> -->
      <p @click="bianji">{{ text }}</p>
    </view>
    <scroll-view
      scroll-x
      style="padding-top: 6rpx"
      class="bg-white nav"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        class="cu-item view"
        :class="index == TabCur ? 'text-green cur' : ''"
        v-for="(item, index) in list"
        :key="index"
        @tap="tabSelect"
        :data-id="index"
      >
        {{ item.name }}
        <image
          src="https://pic.bangbangtongcheng.com/static/xuanzhong.png"
          mode="widthFix"
          v-if="TabCur == index"
        />
      </view>
    </scroll-view>

    <scroll-view
      class="list"
      :style="'height: calc(100vh - ' + curTop - safeBottom + 'px );'"
      scroll-y
      @scrolltolower="down"
      refresher-background="#f5f5f5"
    >
      <view class="list_1" v-if="TabCur == 0">
        <view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item, 1)">
          <checkbox
            v-if="width == 290"
            style="top: -47px; margin-right: 10px"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view>
          <image
            mode="aspectFit"
            class="img1"
            :src="item.displayDiagram ? item.displayDiagram : imgUrl + item.houseImage"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/318a1d5fb5824c98818fc6caefa3dce3"
            v-if="item.delFlag == 1"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/3f01f28dceb6432996f5d833a0f1eca0"
            v-else-if="item.status == 1 && item.transactionType == 2"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/4b22965fc260405dbd08d500ec878283"
            v-else-if="item.status == 1 && item.transactionType == 1"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/cd7976b5de9e42bd8f51fff615f8a9e8"
            v-else-if="item.status == 0 && item.upStatus == 1"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/c528d690f47944849578078ef17b1165"
            v-else-if="item.upStatus == 0"
          />
          <view class="li_1" :style="'width: ' + width + 'rpx'">
            <view class="tit">{{ item.title }}</view>
            <view class="neirong_1">
              <view class="neir_css">{{ item.region }}</view>
            </view>
            <view class="neirong_1">
              <view class="neir_css">{{ item.houseType || '' }}</view>
            </view>
            <view class="neirong_1">
              <view class="price neir_css" v-if="item.transactionType == 2"
                >{{ item.price }}万</view
              >
              <view class="price neir_css" v-if="item.transactionType == 1 && item.price <= 10000"
                >{{ item.price }}元</view
              >
              <view class="price neir_css" v-if="item.transactionType == 1 && item.price > 10000"
                >{{ item.price / 10000 }}万元</view
              >
              <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
            </view>
          </view>
        </view>
      </view>
      <view class="list_1" v-if="TabCur == 1">
        <view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item, 2)">
          <checkbox
            v-if="width == 290"
            style="top: -47px; margin-right: 10px"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view>
          <image mode="aspectFit" class="img1" :src="imgUrl + item.image" />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/static/yzx.png"
            v-if="item.isDelUser == 0"
          />
          <view class="li_1" :style="'width: ' + width + 'rpx'">
            <view class="tit">{{ item.shopName }}</view>
            <view class="jiedao">地址：{{ item.shopArea + item.shopAddress }}</view>
            <view class="shijian">
              <span style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
                >{{ item.houseNum || 0 }}套</span
              >
              <span v-if="item.isOpen == 1">开盘</span>
              <span v-if="item.isOpen == 0">未开盘</span>
            </view>
          </view>
        </view>
      </view>
      <view v-if="TabCur == 2">
        <view
          class="mingpian"
          v-for="(item, index) in Recommend"
          @click="details(item, 3)"
          :key="item"
          :style="'margin-left: ' + (396 - width) + 'rpx;width: ' + (width + 324) + 'rpx'"
        >
          <checkbox
            v-if="width == 290"
            style="top: 70rpx; left: -80rpx; position: relative"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="name">{{ item.userName || item.nikeName }}</view>
          <image mode="aspectFit" class="img1" :src="item.image" />
          <view class="img2">经纪人</view>
          <view class="xin">
            <image
              class="img3"
              v-for="item1 in Number(item.score)"
              :key="item1"
              src="https://pic.bangbangtongcheng.com/static/xin_liang.png"
            />
            <image
              class="img3"
              v-for="item1 in 5 - item.score"
              :key="item1"
              src="https://pic.bangbangtongcheng.com/static/xin_hui.png"
            />
          </view>
          <image
            class="img4"
            @click.stop="chat(item.id, item.userName || item.nikeName, item.image)"
            src="https://pic.bangbangtongcheng.com/static/xiaoxi_lan.png"
          />
          <image
            class="img5"
            @click.stop="getPhone(item.phone)"
            src="https://pic.bangbangtongcheng.com/static/dianhua_lan.png"
          />
        </view>
      </view>
      <view class="list_2" v-if="TabCur == 3">
        <view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item, 4)">
          <checkbox
            v-if="width == 290"
            style="top: -47px; margin-right: 10px"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view>
          <image class="img1" mode="aspectFit" :src="imgUrl + item.image" />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/318a1d5fb5824c98818fc6caefa3dce3"
            v-if="item.delFlag == 1"
          />
          <view class="li_1" :style="'width: ' + width + 'rpx'">
            <view class="tit">{{ item.title }}</view>
            <view class="shijian">
              <span style="margin-right: 14rpx">{{ item.author }}</span>
              <span>{{ item.createDate }}</span>
            </view>
          </view>
        </view>
      </view>
      <view class="list_1" v-if="TabCur == 4">
        <view class="li" v-for="(item, index) in Recommend" :key="index" @click="details(item, 5)">
          <checkbox
            v-if="width == 290"
            style="top: -47px; margin-right: 10px"
            :checked="item.active"
            :data-index="index"
            @click.stop="changeRadio"
          ></checkbox>
          <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view>
          <image class="img1" mode="aspectFit" :src="imgUrl + item.image" />
          <image
            class="shangb"
            src="https://pic.bangbangtongcheng.com/static/zai.png"
            v-show="item.isOpen == 1"
          />
          <image
            class="shangb"
            src="https://pic.bangbangtongcheng.com/static/wei.png"
            v-show="item.isOpen == 0"
          />
          <img
            class="shangb"
            src="https://pic.bangbangtongcheng.com/static/yzx.png"
            v-if="item.isDelUser == 0"
          />
          <view class="li_1" :style="'width: ' + width + 'rpx'">
            <view class="tit">{{ item.title }}</view>
            <view class="jiedao">地址：{{ item.address }}</view>
            <view class="shijian">
              <span>均价：</span>
              <span
                style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
                v-if="item.averagePrice > 10000"
                >{{ (item.averagePrice / 10000) | nums }}万/㎡</span
              >
              <span
                style="margin-right: 24rpx; color: red; font-size: 36rpx; font-weight: 600"
                v-else
                >{{
                  isNaN(item.averagePrice) ? item.averagePrice : item.averagePrice + '/㎡'
                }}</span
              >
            </view>
          </view>
        </view>
      </view>
      <view v-if="Recommend.length == 0" class="none">
        <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
        <view>没有更多数据了</view>
      </view>
      <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
    </scroll-view>
    <view class="bot" v-if="width == 290">
      <checkbox
        style="top: 34rpx; left: 30rpx; position: relative"
        :checked="checked"
        @click="allChecked"
      ></checkbox>
      <span style="position: absolute; top: 40rpx; left: 90rpx">全选</span>
      <view class="bot_4" @click="xiajiao">取消收藏</view>
    </view>
    <view class="zbc" @click="guan" v-if="zbc">
      <view class="tan" @click.stop="a" v-if="shouye">
        <view class="li_1">置顶信息：雄楚大道1号金地·中心城区</view>
        <view class="li_2">
          <view>置顶天数：</view>
          <view class="xuan">
            <picker @change="PickerChange" :range="picker">
              <view class="picker">{{ picker[0] }}</view>
            </picker>
          </view>
        </view>
        <view class="li_3">平台规则：每天限定置顶20条次，置顶信息按时间排序</view>
        <view class="li_4">取消</view>
        <view class="li_5">确定</view>
      </view>
      <view @click.stop="a" class="shangjia" v-if="shangjia">
        <view class="li_1">确定要取消收藏吗？</view>
        <view class="li_2" @click="guan">取消</view>
        <view class="li_3" @click="cancel">确定</view>
      </view>
    </view>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  let statusBarHeight
  //#ifdef H5
  import wxshare from '../utils/index.js'
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = 96
  //  #endif
  export default {
    data() {
      return {
        events: [],
        width: 366,
        text: '编辑',
        TabCur: 0,
        zbc: false,
        shouye: false,
        shangjia: false,
        statusBarHeight,
        list: [
          {
            num: 1,
            name: '房源',
          },
          {
            num: 2,
            name: '店铺',
          },
          {
            num: 3,
            name: '经纪人',
          },
          {
            num: 4,
            name: '文章',
          },
          {
            num: 5,
            name: '楼盘',
          },
        ],
        scrollLeft: 0,
        Recommend: [],
        pageSize: 10,
        pageNo: 1,
        trigger: false,
        downStatus: true,
        upStatus: true,
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        picker: [],
        checked: false,
        curTop: 0,
        safeBottom: 0,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
      images(url) {
        let arr = url.split('')
        if (arr[0] == '/') {
          return this.imgUrl + url
        } else {
          return url
        }
      },
    },
    onLoad() {
      for (let i = 1; i < 11; i++) {
        this.picker.push(i + '天')
      }
      this.getRecommend()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      guan() {
        this.zbc = false
        this.shangjia = false
        this.shouye = false
      },
      bianji() {
        if (this.text == '编辑') {
          this.text = '完成'
          this.width = 290
        } else {
          this.text = '编辑'
          this.width = 366
        }
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      chat(receiver, nikeName, img) {
        uni.navigateTo({
          url: `/pages/news/chat1?receiver=${receiver}&img=${img}&nikeName=${nikeName}`,
        })
      },
      a() {},
      allChecked() {
        this.checked = !this.checked
        if (this.checked) {
          this.Recommend.forEach((el) => {
            el.active = true
          })
        } else {
          this.Recommend.forEach((el) => {
            el.active = false
          })
        }
      },
      async getPhone(phone) {
        this.onphone(phone)
      },
      onphone(phone) {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: phone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },

          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          },
        })
      },
      xiajiao() {
        let that = this
        let arr1 = []
        let arr = this.Recommend.filter((el) => {
          if (el.active) {
            arr1.push(el.id)
          }
          return el.active
        })
        console.log(arr)
        if (arr.length == 0) {
          uni.showToast({
            title: '请选择收藏记录',
            icon: 'none',
            mask: true,
          })
        }
        this.zbc = true
        this.shangjia = true
      },
      cancel() {
        let that = this
        let arr1 = []
        let arr = this.Recommend.filter((el) => {
          if (el.active) {
            arr1.push(el.id)
          }
          return el.active
        })
        this.Recommend.forEach((item) => {
          console.log(item.id, item.active)
        })
        console.log(arr)
        console.log(this.Recommend)
        if (!arr.length) {
          uni.showToast({
            title: '请选择收藏记录',
            icon: 'none',
            mask: true,
          })
        }
        this.$myRequest
          .post('/mob/user/delUserCollection', {
            type: 1,
            userId: this.userInfo.id,
            cbType: this.TabCur + 1,
            ids: String(arr1),
            delType: 2,
          })
          .then((res) => {
            uni.showToast({
              title: '操作成功',
              icon: 'none',
              mask: true,
            })
            setTimeout(() => {
              that.bianji()
              that.guan()
              that.Recommend = []
              that.pageNo = 1
              that.downStatus = true
              that.upStatus = true
              that.getRecommend()
            }, 1000)
          })
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60

        this.text = '编辑'
        this.width = 366
        this.checked = false

        this.Recommend = []
        this.pageNo = 1
        this.downStatus = true
        this.upStatus = true
        this.getRecommend()
      },
      details(item, type) {
        if (type == 1) {
          if (item.delFlag == 1 || item.upStatus == 0 || item.status == 1) {
            uni.showToast({
              title: '该房源已不存在或已租售',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_houses/housing/used/houseDetails?id=' + item.id,
          })
        } else if (type == 2) {
          if (item.isDelUser == 0) {
            uni.showToast({
              title: '该店铺已不存在',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_intermediary/shopDetails?id=' + item.id,
          })
        } else if (type == 3) {
          if (!this.showLogin()) {
            return
          }
          uni.navigateTo({
            url: '/pages_owner/dealer/goldConsultant?userId=' + item.id,
          })
        } else if (type == 4) {
          if (item.delFlag == 1) {
            uni.showToast({
              title: '该文章已不存在',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_index/Watch/details?id=' + item.id,
          })
        } else if (type == 5) {
          if (item.isDelUser == 0) {
            uni.showToast({
              title: '该楼盘已不存在',
              icon: 'none',
              mask: true,
            })
            return
          }
          uni.navigateTo({
            url: '/pages_houses/houses/housesDetails?id=' + item.id,
          })
        }
      },
      down() {
        if (this.downStatus) {
          this.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getRecommend() {
        let that = this
        this.upStatus = false
        this.$myRequest
          .get('/mob/user/getUserCollection', {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
            userId: this.userInfo.id,
            type: 1,
            cbType: this.TabCur + 1,
          })
          .then((res) => {
            if (res.page.list.length < 10) {
              this.downStatus = false
            }
            this.upStatus = true
            this.trigger = false
            res.page.list.forEach((el) => {
              el.active = false
              if (el.hasOwnProperty('houseImage')) {
                el.houseImage = el.houseImage.split('|')[0]
              }
              if (this.TabCur == 4) {
                el.image = el.showImg.split('|')[0]
              }
              if (el.hasOwnProperty('image')) {
                el.image = el.image.split('|')[0]
              }
            })
            this.Recommend = this.Recommend.concat(res.page.list)
            uni.stopPullDownRefresh()

            this.$nextTick(function () {
              uni
                .createSelectorQuery()
                .in(this)
                .select('.list')
                .boundingClientRect((result) => {
                  if (result) {
                    that.curTop = result.top
                  }
                })
                .exec()
            })
          })
      },

      changeRadio(e) {
        let that = this
        let index = e.currentTarget.dataset.index
        that.Recommend[index].active = !that.Recommend[index].active
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  .shangb {
    position: absolute;
    /* top: 0px; */
    left: 0;
    width: 104rpx;
    height: 85rpx;
  }
  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);

    .tan {
      position: absolute;
      width: 600rpx;
      height: 420rpx;
      background-color: #fff;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 10rpx;
      overflow: hidden;

      .li_1 {
        margin-left: 32rpx;
        margin-top: 60rpx;
        font-weight: 600;
        font-size: 30rpx;
      }

      .li_2 {
        font-size: 30rpx;
        margin-left: 32rpx;
        margin-top: 30rpx;

        view {
          display: inline-block;
          font-weight: 600;
          font-size: 30rpx;
        }

        .xuan {
          position: relative;
          width: 160rpx;
          height: 60rpx;
          background: #ffffff;
          border: 2rpx solid #64b6a8;
          border-radius: 37rpx;
          line-height: 60rpx;
          color: #64b6a8;
          text-indent: 16rpx;
        }

        .xuan::before {
          position: absolute;
          top: 20rpx;
          right: 30rpx;
          content: '';
          border-color: #fff #fff #64b6a8 #fff;
          border-style: solid;
          border-width: 0rpx 8rpx 14rpx 8rpx;
          height: 0;
          width: 0;
        }
      }

      .li_3 {
        width: 536rpx;
        font-size: 24rpx;
        margin-left: 32rpx;
        color: #ea4b4b;
        margin-top: 40rpx;
      }

      .li_4 {
        position: absolute;
        font-size: 30rpx;
        width: 300rpx;
        height: 90rpx;
        background: #f2f2f2;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: 90rpx;
      }

      .li_5 {
        position: absolute;
        font-size: 30rpx;
        width: 300rpx;
        height: 90rpx;
        background: #64b6a8;
        bottom: 0;
        right: 0;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
      }
    }

    .shangjia {
      position: absolute;
      width: 600rpx;
      height: 300rpx;
      background-color: #fff;
      border-radius: 10rpx;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);

      .li_1 {
        width: 100%;
        font-size: 34rpx;
        font-weight: 600;
        margin-left: 165rpx;
        margin-top: 80rpx;
      }

      .li_2 {
        display: inline-block;
        vertical-align: top;
        width: 160rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #64b6a8;
        border-radius: 37rpx;
        text-align: center;
        line-height: 60rpx;
        color: #64b6a8;
        margin-top: 58rpx;
        margin-left: 118rpx;
      }

      .li_3 {
        display: inline-block;
        vertical-align: top;
        width: 160rpx;
        height: 60rpx;
        background: #64b6a8;
        border-radius: 37rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        margin-top: 58rpx;
        margin-left: 46rpx;
      }
    }
  }

  .box {
    width: 100%;
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    height: 100vh;
    // padding-bottom: 130rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }

    p {
      position: absolute;
      // top: 90rpx;
      line-height: 45rpx;
      bottom: 21rpx;
      right: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }

  .bot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    z-index: 9;

    view {
      display: inline-block;
      position: absolute;
    }

    .bot_1 {
      left: 42rpx;
      top: 38rpx;
    }

    .bot_4 {
      width: 200rpx;
      height: 70rpx;
      background: #64b6a8;
      color: #ffffff;
      line-height: 68rpx;
      left: 520rpx;
      top: 25rpx;
      text-align: center;
      border-radius: 36rpx;
    }
  }

  .list_1 {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 12rpx;
    }

    .li {
      position: relative;
      width: 96%;
      padding-bottom: 18rpx;
      margin-bottom: 34rpx;

      .xian {
        position: absolute;
        height: 2rpx;
        background-color: #e0e0e0;
        bottom: 0;
        right: 0;
      }

      .img1 {
        width: 300rpx;
        height: 200rpx;
      }

      .img2 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .img3 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 100%;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .neirong_1 {
          // width: 366rpx;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;
          .price {
            color: red;
            font-size: 30rpx;
            font-weight: 600;
          }
          .neir_css {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }
          .neir_css:nth-child(2n) {
            margin-left: 10rpx;
          }
          .neir_css:nth-child(2n-1) {
            margin-right: 10rpx;
          }
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .mingpian {
    position: relative;
    width: 690rpx;
    height: 200rpx;
    background: #ffffff;
    box-shadow: 0px 0px 6rpx rgba(0, 0, 0, 0.16);
    border-radius: 18rpx;
    margin-top: 40rpx;
    margin-left: 30rpx;

    .name {
      position: absolute;
      top: 50rpx;
      left: 174rpx;
      font-size: 36rpx;
      max-width: 300rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .img1 {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      position: absolute;
      top: 44rpx;
      left: 30rpx;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }

    .img2 {
      position: absolute;
      top: 132rpx;
      left: 40rpx;
      width: 100rpx;
      height: 36rpx;
      background: url('https://pic.bangbangtongcheng.com/static/name.png');
      background-size: 100% 100%;
      font-size: 20rpx;
      color: #fff;
      text-align: center;
      line-height: 36rpx;
    }

    .zhiwei {
      position: absolute;
      top: 132rpx;
      left: 54rpx;
      font-size: 20rpx;
      color: #fff;
    }

    .xin {
      position: absolute;
      top: 112rpx;
      left: 170rpx;

      .img3 {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .img4 {
      position: absolute;
      width: 54rpx;
      height: 54rpx;
      top: 50rpx;
      left: 500rpx;
    }

    .img5 {
      position: absolute;
      width: 54rpx;
      height: 54rpx;
      top: 50rpx;
      left: 560rpx;
    }
  }

  .list_2 {
    margin-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 12rpx;
    }

    .li {
      position: relative;
      width: 96%;
      padding-bottom: 18rpx;
      margin-bottom: 34rpx;

      .xian {
        position: absolute;
        height: 2rpx;
        background-color: #e0e0e0;
        bottom: 0;
        right: 0;
      }

      .img1 {
        width: 300rpx;
        height: 200rpx;
      }

      .img2 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .img3 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
          width: 100%;
          font-size: 34rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //想要的行数
          -webkit-box-orient: vertical;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 26rpx;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .view {
    position: relative;
    font-size: 26rpx;
    border: 0;
    color: #333333;
    margin-right: 0;

    image {
      position: absolute;
      width: 44rpx;
      height: 24rpx;
      top: 66rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 48rpx;
    height: 48rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/ uni-checkbox::before {
    font-size: 40rpx;
    margin-top: -14rpx;
    right: 6rpx !important;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    .img1 {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
    }

    .img2 {
      position: absolute;
      width: 300rpx;
      height: 200rpx;
    }

    .img3 {
      position: absolute;
      width: 300rpx;
      height: 200rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
